import React,{ Component } from 'react';
import styles from './index.less';
import { connect } from 'react-redux';
import * as actionCreates from './store/actionTypes';
import { parse } from 'query-string';
class Detail extends Component{
    close(){
        window.alert('小明')
    };
    render(){
        let { title ,content,name,img,ioc,publishTime,readNum,likeNum,commentNum,wordNum} =this.props;
        return(
            <div>
                <div className={ styles.articleBox }>
                    <h1 className={ styles.title }>{title}</h1>
                    <div className={styles.auther}>
                        <div className={styles.autherIco}><a className={styles.ioc}><img src={ img }/></a></div>
                        <div className={styles.autherInfo}>
                            <div className={styles.name}>
                                <span><a href='#'>{name}</a></span>
                                <span><a href='#'><img src={ioc}></img></a></span>
                                <span className={styles.comment} ><a href='#' >+ 关注</a></span>
                            </div>
                            <div className={styles.articleMeta}>
                                <span className={styles.publishTime}>{publishTime} </span>
                                <span className={styles.wordNum}> 字数{wordNum}</span>
                                <span className={styles.readNum}>  阅读{readNum}</span>
                                <span className={styles.commentNum}> 评论{commentNum}</span>
                                <span className={styles.likeNum}> 喜欢{likeNum}</span>
                            </div>
                        </div>  
                    </div>
                    <div className={styles.article } dangerouslySetInnerHTML={{__html:content}} ></div>
                </div>
                <div className={styles.advices}>
                    <a href="#" className={styles.advBox }>
                        <div className={styles.adv1}>
                            <img src='../assets/articleAd1.png'/>
                            <span className={styles.span1}  onClick={this.close}> x </span>
                        </div>
                    </a>
                    <a href="#" className={styles.advBox }>
                        <div className={styles.adv2}>
                            <img src='../assets/articleAd2.png'/>
                            <span className={styles.span2}>广告</span>
                        </div>
                    </a>
                </div>
            </div>
        )
    };
    componentDidMount(){
        console.log('this.props-------',parse(location.search))
        const id=parse(location.search).id
        this.props.getDetailDate(id)
    }
};

const mapState =(state) =>{
    return{
        title:state.detail.title,
        img:state.detail.img,
        content:state.detail.content,
        name:state.detail.auther.name,
        ioc:state.detail.auther.ioc,
        publishTime:state.detail.auther.time,
        readNum:state.detail.auther.readNum,
        likeNum:state.detail.auther.likeNum,
        commentNum:state.detail.auther.commentNum, 
        wordNum:state.detail.auther.wordNum,
    }
};
const mapDispatch =(dispatch) => ({
    getDetailDate(id){
        dispatch(actionCreates.getDetail(id))
    }
}); 
export default connect(mapState,mapDispatch)(Detail);